body {
	font-family: sans-serif; padding: 2em; background-color: #f4f4f4;
	background-image: url("deaddrop.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}
h1, h2, h3 { color: #333; }
a { color: #007bff; text-decoration: none; }

@font-face {
  font-family: 'Bungee Tint';
  src: url('BungeeTint-Regular.ttf') format('truetype');
}

a:hover { text-decoration: underline; }
.container { max-width: 960px; margin: auto; background: white; padding: 2em; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
div.title { display: flex; align-items: center; gap: .5em; text-align: left; font-family: 'Bungee Tint'; font-size: 2em; font-weight: bold; line-height:100%}

div.title img { margin: 0; }
.nb {
	border-collapse: collapse;
	width: 100%;
	margin-top: 0.35em;
	box-shadow: 0 2px 3px rgba(0,0,0,0.1);
}
th, .nb td {
	border: 1px solid #ddd;
	padding: 4px 4px;
	text-align: left;
}
th {
	background-color: #007bff;
	color: white;
	font-weight: bold;
	font-size: 10pt
}
.nb tr { border-bottom: 1px solid #ddd; }
.nb tr:nth-of-type(even) { background-color: #f9f9f9; }
.nb tr:hover { background-color: #f1f1f1; }
.delbtn { cursor: pointer; }
#da { border: 2px dashed #ccc; padding: 2em; text-align: center; color: #888; border-radius: 5px; margin-top: 1em;}
#da.trot { border-color: #007bff; background-color: #e9f5ff; }
.upload-section { margin-top: 2em; padding: 1.5em; border: 1px solid #eee; border-radius: 5px; background-color: #fafafa; }

.dd-list { width: 100%; }
.td { padding: 2px }
.h1 { }
.dd-fileinfo { font-size: 8pt; }
.dd-textarea {
	width: 100%;
	height: 80px;
	resize: vertical;
}
table td { 
  display: table-cell;
  vertical-align: top;
  background-color: rgba(247, 247, 232, 0.6);
  text-align: left;
  font-size: 10pt
}
table {
	border: 1px solid #ccc;
	padding: 1px;
	border-radius: 2px;
	transition: background-color 0.5s ease;
}
table.nb { border: 0px; border-radius: 0px; transition: opacity 0.5s; }
table.noconn { background-color: #ddd; }

div { transition: opacity 0.5s; }
div.da { padding-left: 20px; padding-right:20px; }
div.trot {
	animation: scale 0.5s linear infinite;
}
div.uplbox { padding-bottom: 8px; }
div.disa { opacity: 0.2; }

td.ogn { text-align:left; font-size: 8pt; padding-left: 4px; padding-right: 4px;}
td.dow { text-align:left; font-size: 9pt; padding-left: 4px; padding-right: 4px;}
td.r { text-align: right; }
td.err { color: red; font-weight: bold; }
.btn-cell {
	vertical-align: middle;
	text-align: center;
}

h2 { font-size: 12pt; margin-bottom: 8px; }
h3 { font-size: 9pt; margin-bottom: 6px; }
span { font-size: 9pt; }
a { font-size: 9pt; }

input.ubtn { font-size: 16pt; margin-top: 4px; text-align: center }

img.working {
	display: inline-block;
	float:left;
	background: url("");
	width:0px;
	height:0px;
	cursor:pointer;
	padding:0.6em 1em;
	background-repeat: no-repeat;
	vertical-align:middle;
	color: rgba(0, 0, 0, 0);
}

img.delbtn {
	display: inline-block;
	background: url("");
	cursor:pointer;
	padding:0.45em;
	background-repeat: no-repeat;
	vertical-align:middle;
	color: rgba(0, 0, 0, 0);
}

@keyframes scale {
  50% {
    opacity: 0.5;
    transform:scale(1.1) rotate(2deg);
  }
}

.textbtn {
	font-size: 8pt;
	font-weight: bold;
	padding: 2px 6px;
	margin-right: 5px;
	border-radius: 3px;
	border: 1px solid #ccc;
	background-color: #f0f0f0;
	cursor: pointer;
	vertical-align: middle;
}

.textbtn:hover {
	background-color: #e0e0e0;
}

.textbtn_spacer {
	display: inline-block;
	width: 27px; /* Approximate width of the button */
	vertical-align: middle;
}
